This form was designed as part of a project meant to convert a previously analogue element of the service of voter registration into a digital one. This element of the project converted the (rather imposing) physical voter registration form shown below into a digital format, with revisions in color scheme, type, and information hierarchy coming into play along the way.
role in the development of this project:
Starting with a process of whiteboarding and sketching, and continuing on to initially rough and then successively higher-fidelity mockups in Sketch, I reorganized and redesigned the information on the physical voter form for a web browser while still having the form record all of the information legally required by the State of Pennsylvania for registering a new voter. I also used InVision to create a clickable prototype of the low fidelity wireframes to show to classmates in order to better solicit their feedback about hierarchy and visual design aspects.
expertise the project demonstrates:
This project demonstrates my ability to create forms of varying fidelity in Sketch, place those forms in front of users using InVision, and then iterate upon the design based upon feedback from users. It also illustrates my ability to reimagine a physical form into a digital, multi-screen web form.
credits:
“Vote” icon created by Noun Project user Desbenoit
“User” icon created by Noun Project user José Campos
“Home” icon created by Noun Project user Edward Boatman
Many thanks to colleague Raghavendra Kandala for his visual suggestions around my project, and for recommending the book “Web Form Design” by Luke Wroblewski.
The first of two pages of a paper form designed for Pennsylvania citizens to fill in and mail to their local voter registration office. This was the form my classmates and I redesigned into a digital format (shown below).
The final screen before users can submit their information. Note the breadcrumbs that illuminate based upon which stage of the process one is in, beginning with Personal Information and concluding with Voting Information.
Page for showing users the legal confirmation of their eligibility to register as a new voter online. This page appears at the start of the registration task flow, and the contextual navigation bar is still visible here on the bottom of the screen before disappearing once the user proceeds past this initial confirmation.
An example of error states for both the breadcrumbs adjacent to the navigation bar and the in-line form fields.
The final screen before showing users confirmation of their successfully received registration form, confirming that all information provided is true and that they are legally allowed to vote in the state of Pennsylvania.
